<template>
    <div id="app">
        <vue-image-mix ref="myCanvas" width="600" height="600"/>
        <button @click="changeBackground">修改背景图</button>
        <button @click="deleteBackground">删除背景图</button>
        <button @click="addIcon">增加图片</button>
        <button @click="deleteIcon">删除图片</button>
        <button @click="exportImage">导出图片</button>

    </div>
</template>

<script>
import {defineComponent} from 'vue';
import VueImageMix from '@/vue-image-mix.vue';

export default defineComponent({
    name: 'ServeDev',
    components: {
        VueImageMix
    },
    data(){
        return {
            models:[],
        }
    },
    mounted() {
        this.$refs.myCanvas.init();
        const backgroundImage = require('./assets/backgroundImage/eachTemplate.png');
        let img = new Image();
        img.src = backgroundImage;
        img.onload = ()=>{
            this.$refs.myCanvas.drawBackgroundImage(img);
        }
    },
    methods:{
        changeBackground() {
            let img = new Image();
            img.src = require('./assets/backgroundImage/eachTemplate1.png')
            img.onload = () => {
                this.$refs.myCanvas.drawBackgroundImage(img);
            }
        },
        deleteBackground() {
            this.$refs.myCanvas.deleteBackgroundImage();
        },
        addIcon() {
            let img2 = new Image();
            img2.src = require('./assets/IconImage/eachMaterial.png');
            img2.onload = () => {
                const item = this.$refs.myCanvas.drawIconImage(img2);
                this.models.push(item);
            }
        },
        deleteIcon() {
            this.$refs.myCanvas.deleteIconImage(this.models[0]);
        },
        exportImage() {
            const exportSrc = this.$refs.myCanvas.exportImage('image/png');
            let oA = document.createElement("a");
            oA.download = '导出图片';
            oA.href = exportSrc;
            document.body.appendChild(oA);
            oA.click();
            oA.remove();
        }
    }
});
</script>
<style scoped>
button {
    margin-left: 20px;
}
</style>

